<% title t("views.dashboard.meta.title", site: community_name) %>

<div id="index-container"
  data-params="<%= params.to_json(only: %i[action per_page]) %>"
  data-which="following">
  <main id="main-content" class="crayons-layout crayons-layout--header-inside crayons-layout--2-cols">
    <%= render("header_and_action", page_title: t("views.dashboard.following_orgs.heading")) %>
    <div class="crayons-layout__content" id="user-dashboard">
      <% if @followed_organizations.any? %>
        <div id="following-wrapper" class="grid gap-0 s:gap-3 m:gap-4 s:grid-cols-2 l:grid-cols-3 align-left s:align-center">
          <% @followed_organizations.each do |follow| %>
            <% organization = follow.followable %>
            <div class="crayons-card p-4 m:p-6 flex s:grid single-article break-word content-center" id="follows-<%= follow.id %>">
              <a href="<%= organization.path %>" class="crayons-logo crayons-logo--2xl s:mb-2 s:mx-auto">
                <img alt="<%= organization.name %> logo" class="crayons-logo__image" src="<%= organization.profile_image_url_for(length: 60) %>" loading="lazy" />
              </a>

              <div class="pl-4 s:pl-0 self-center">
                <h3 class="s:mb-1 p-0">
                  <a href="<%= organization.path %>">
                    <%= organization.name %>
                  </a>
                </h3>

                <p>
                  <a href="<%= organization.path %>" class="crayons-link crayons-link--secondary">
                    @<%= organization.username %>
                  </a>
                </p>
              </div>
            </div>
          <% end %>
        </div>
      <% else %>
        <div class="p-9 crayons-card crayons-card--secondary align-center fs-l h-100 flex items-center justify-center"><%= t("views.dashboard.following_orgs.empty") %></div>
      <% end %>
      <%= render "sublist" %>
    </div>
  </main>
</div>
